<template>
    <el-avatar :size="size" :src="src" :alt="alt">
      <template #icon>
        <el-icon v-if="icon && !src">
          <component :is="icon" />
        </el-icon>
      </template>
      <template #default>
        <span v-if="!src">{{ initials }}</span>
      </template>
    </el-avatar>
  </template>
  
  <script setup lang="ts">
  import { defineProps, computed } from 'vue';
  import { User as UserIcon } from '@element-plus/icons-vue';
  
  const props = defineProps({
    size: {
      type: [Number, String],
      default: 40,
    },
    src: {
      type: String,
      default: '',
    },
    alt: {
      type: String,
      default: 'avatar',
    },
    username: {
      type: String,
      default: '',
    },
    icon: {
      type: Object,
      default: () => UserIcon,
    },
  });
  
  const initials = computed(() => {
    if (!props.username) return '';
    const names = props.username.split(' ');
    return names.map(name => name[0]).join('').toUpperCase();
  });
  </script>
  
  <style scoped>
  .el-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f56c6c;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  </style>
  